<template>
  <div class="example-source-wrapper" ref="container">
  </div>
</template>

<script>
import ace from 'ace-builds'
import 'ace-builds/src-noconflict/theme-github'
import 'ace-builds/src-noconflict/mode-html'

export default {
  props: {
    source: {
      type: String,
      required: true,
      default: ''
    }
  },
  computed: {
    decoded() {
      return decodeURIComponent(this.source)
    }
  },
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    this.initEditor()
  },
  methods: { 
    initEditor() {
      const editor = ace.edit(this.$refs.container);
      editor.session.setMode("ace/mode/html");
      editor.setReadOnly(false);
      editor.setOptions({
        tabSize: 2,
        fontSize: '16px'
      });
      editor.setValue(this.decoded, 1)
      this.editor = editor
    },
    getCode() {
      return this.editor.getValue()
    }
  }
}
</script>

<style scoped lang="scss">
.example-source-wrapper {
  height: 20rem;
}
</style>
